<!--
 * @Author: wangshuguang
 * @Date: 2022-04-12 15:34:36
 * @LastEditTime: 2022-04-12 16:03:04
 * @LastEditors: wangshuguang
 * @Description: 文件描述...
-->
<template>
  <div class="uploadContent">
    <el-upload
      :action="uploadImgApi"
      :show-file-list="false"
      :headers="{ 'X-SERVICER-TOKEN': $store.state.user.token }"
      :before-upload="uploadImgBefore"
      :on-progress="uploadImgProgress"
      :on-error="uploadImgError"
      :on-success="uploadImgSuccess"
      class="upload-box"
    >
      <div v-if="valIsArr && fileSource.length" class="fileSource list">
        <el-image v-for="img of fileSource" :key="img" :src="fileBaseUrl + img" class="upload-img" fit="contain" />
      </div>
      <div v-else-if="fileSource" class="fileSource img">
        <el-image :src="fileBaseUrl + fileSource" class="upload-img" fit="contain" />
      </div>
      <i v-show="upIconVis" class="el-icon-plus" />
    </el-upload>
  </div>
</template>

<script>
import { uploadImgApi } from '@/api/upload'
import { mapGetters } from 'vuex'
export default {
  props: {
    // upload 绑定数据源
    value: {
      type: [Array, String],
      default: ''
    },
    // 上传文件最大值
    maxFileLength: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      uploadImgApi,
      baseUrl: ''
    }
  },
  computed: {
    // 上传按钮显示状态
    upIconVis() {
      // 数组类型  校验数组长度是否和上传文件最大值 相同
      if (this.valIsArr) {
        return this.maxFileLength != this.fileSource.length
      } else {
        // 字符串类型  校验fileSource 是否已经存在
        return !this.fileSource
      }
    },
    valIsArr() {
      // 校验数据源是否为数组
      return Array.isArray(this.value)
    },
    fileSource: {
      get() { return this.value },
      set(val) {
        console.log('img val', val)
        this.baseUrl = this.baseUrl + val
        console.log('this.baseUrl', this.baseUrl)
        this.$emit('input', val)
      }
    },
    ...mapGetters(['fileBaseUrl'])
  },
  methods: {
    // 上传图片前
    uploadImgBefore(file) {
      return this.$uploadImgBefore({ file, maxSizes: 0.5, fileType: ['JPG', 'PNG'] })
    },

    // 上传图片中
    uploadImgProgress() {
      this.loading = true
    },

    // 上传图片错误
    uploadImgError() {
      this.loading = false
    },

    // 上传图片成功
    uploadImgSuccess(res) {
      this.loading = false
      if (res.code === 0) {
        console.log('res.data', res.data)
        console.log('res.data.baseUrl', res.data.baseUrl)
        this.baseUrl = res.data.baseUrl + res.data.path
        this.$emit('func', this.baseUrl)
        const { path } = res.data
        if (this.valIsArr) {
          this.fileSource.push(path)
        } else {
          this.fileSource = path
        }
      } else {
        this.$message.error(res.code + ':' + res.msg)
      }
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
  .uploadContent{
    .upload-box{
      /deep/.el-upload{
        width: 220px;
        height: 120px;

        display: block;
        .el-icon-plus {
          line-height: 100px;
        }
      }
    }
  }
</style>
